<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页商场</title>
    <link rel="stylesheet" href="./swiper-7.4.1/swiper/swiper-bundle.min.css" />
    <script src="./swiper-7.4.1/swiper/swiper-bundle.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body,
      html {
        height: 100%;
        width: 100%;
        background: rgb(241, 243, 245);
      }
      #box {
        width: 100%;
        background-color: black;
      }
      a,
      li,
      ul {
        list-style: none;
        text-decoration: none;
      }
      #nav {
        height: 36px;
        width: 1200px;
        color: #ccc;
        margin: auto;
      }
      .nav-ul li {
        line-height: 36px;
        float: left;
        background: url(./imgs/fgx.png) no-repeat right;
        font-size: 12px;
        padding-right: 6px;
        display: block;
        margin-right: 6px;
      }
      .nav-ul li a {
        margin: 0 5px;
        color: #ccc;
        text-decoration: none;
      }
      .nav-ul li a:hover {
        color: #fff;
      }
      .left {
        float: left;
      }
      .rigth {
        float: right;
      }
      .nav-ul-rigth {
        float: right;
      }
      #classification {
        width: 100%;
        background: rgb(255, 255, 255);
      }
      .classification-huawei {
        width: 1200px;
        height: 75px;
        margin: auto;
        /* background-color: #ccc; */
      }
      .logo {
        float: left;
        margin-right: 50px;
      }
      .classification-huawei .logo a {
        width: 100px;
        height: 70px;
        display: block;
      }
      .logo a img {
        height: 100%;
        width: 100%;
      }
      .classification-li ul li {
        line-height: 75px;
        float: left;
      }

      .classification-li ul li a {
        color: black;
        margin-right: 40px;
      }
      .classification-li ul li a:hover {
        color: red;
      }
      #rotation {
        width: 100%;
        margin: auto;
      }
      .swiper {
        width: 100%;
        height: 540px;
        margin: auto;
      }
      .swiper-slide img {
        width: 100%;
        height: 100%;
      }
      #list {
        width: 100%;
      }
      .list-li {
        width: 1200px;
        height: 140px;
        margin: auto;
        font-size: 14px;
      }
      .list-fl {
        width: 120px;
        height: 140px;
        padding-left: 50px;
        float: left;
      }
      .list-fl img {
        padding-top: 20px;
        display: block;
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
      }
      .list-fl span {
        text-align: center;
        padding-left: 1px;
        font-weight: bold;
      }
      .list-fl:hover {
        color: blueviolet;
      }
      #list-1 {
        width: 1200px;
        height: 200px;
        margin: auto;
      }
      #list-1 a {
        width: 290px;
        height: 200px;
        display: block;
        background-size: 100%;
        float: left;
        margin-right: 10px;
        margin-bottom: 30px;
      }
      #list-1 a:hover {
        box-shadow: 10px -10px 50px #888888;
      }
      #list-2-ms {
        width: 1200px;
        height: 350px;
        margin: auto;
      }
      .list-2-ms-text {
        width: 100%;
        margin: 30px 0px;
      }
      .list-2-ms-text span {
        display: block;
      }
      .list-2-ms-text span:nth-child(1) {
        font-size: 24px;
        float: left;
      }
      .list-2-ms-text span:nth-child(2) {
        float: right;
      }
      .list-2-ms-img {
        width: 1200px;
        margin: auto;
        float: left;
        margin-bottom: 30px;
      }
      .list-2-ms-img .img1 {
        width: 230px;
        height: 300px;
        background-color: #fff;
        margin-right: 10px;
        text-align: center;
        float: left;
      }
      .img1 img {
        width: 60px;
        height: 60px;
        padding-top: 50px;
        margin-bottom: 10px;
      }
      .spans {
        color: red;
        font-size: 16px;
      }
      .span1 {
        display: block;
        color: rgb(93, 91, 96) !important;
        margin-top: 30px;
      }
      .date {
        margin: auto;
        background: pink;
        padding-left: 40px;
      }
      .date p {
        margin-top: 20px;
        width: 40px;
        height: 40px;
        background: rgb(93, 91, 96);
        float: left;
        display: block;
        text-align: center;
        line-height: 40px;
        margin-right: 15px;
      }
      del {
        font-size: 12px;
        color: #888888;
        margin-left: 5px;
      }
      .img1:hover {
        box-shadow: 10px -10px 50px #888888;
      }
      #list-3-xsg {
        width: 1200px;
        height: 350px;
        margin: auto;
      }

      #tab {
        width: 1200px;
        height: 850px;
        margin: 50px auto;
        /* background-color: pink; */
      }
      #rotTou {
        width: 1200px;
        height: 120px;
        margin: 50px auto;
        /* background-color: aqua; */
      }
      .Touswiper {
        width: 100%;
        height: 100%;
      }
      .tabTxet {
        width: 100%;
        height: 50px;
        /* background-color: aqua; */
      }
      .tab-ul {
        float: left;
        display: block;
        height: 50px;
      }
      .tab-ul li {
        float: left;
        color: #888888;
        font-size: 20px;
        line-height: 50px;
        margin-right: 50px;
        cursor: pointer;
      }
      .tab-ul-gd {
        float: right;
        display: block;
        height: 50px;
      }
      .tab-ul-gd li {
        float: left;
        font-size: 12px;
        line-height: 50px;
        color: #888888;
        cursor: pointer;
      }
      .tabImg {
        width: 1200px;
        height: 800px;
      }
      .tabImgx {
        width: 1200px;
        height: 800px;
        /* background-color: pink; */
        display: none;
      }
      .tabImg0 {
        display: block;
      }
      .tab-ul li:hover {
        color: red;
      }
      .tab-ul .class1 {
        color: #888888;
      }
      .tab-ul .class2 {
        color: black;
      }
      .tab-shouji-1 {
        width: 290px;
        height: 390px;
        background-color: #fff;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
      }
      .tab-shouji-1 img {
        display: block;
        width: 200px;
        height: 200px;
        margin: auto;
        padding-top: 35px;
        padding-bottom: 35px;
      }
      .tab-shouji-1 span {
        font-size: 12px;
        font-weight: bold;
      }
      .tab-shouji-1 p {
        font-weight: bold;
        font-size: 14px;
        text-align: center;
      }
      .span-xin {
        color: #fff;
        background-color: red;
        border-radius: 10%;
        margin-right: 5px;
      }
      .tab-text {
        color: #888888;
        font-weight: normal !important;
        padding: 10px;
        font-size: 12px;
      }
      .tab-moy {
        color: red;
        margin-bottom: 10px;
      }
      .span-jifen {
        color: red;
        border-radius: 10%;
        border: 1px solid red;
        padding: 0 5px;
      }
      .tab-shouji-1:hover {
        box-shadow: 10px -10px 50px #888888;
      }
      #buttom {
        width: 100%;
        background-color: #fff;
      }
      .but-list {
        width: 1200px;
        height: 120px;
        margin: auto;

        border-bottom: 1px solid #ccc;
      }
      .but-list img {
        display: block;
        float: left;
        width: 25px;
        height: 25px;
        margin: auto;
        text-align: center;
        margin-right: 10px;
      }
      .but-list-l {
        width: 210px;
        height: 50px;
        float: left;
        margin-top: 50px;
        margin-left: 90px;
      }
      .but-list .but-list-l:nth-child(1) {
        margin-left: 50px;
      }
      .but-nav {
        width: 1200px;
        margin: auto;
        padding: 50px 0;
      }
      .but-nav-ul {
        float: left;
      }
      .but-nav-ul li {
        margin-top: 10px;
        cursor: pointer;
      }
      .but-nav-box {
        height: 200px;
        font-size: 12px;
        color: #888888;
      }
      .but-nav-ulLi {
        font-size: 14px;
        color: black;
        margin-bottom: 30px;
      }
      .ul-left {
        margin-left: 100px;
      }
      .but-nav-ul li:hover {
        color: red;
      }
      .but-dz {
        width: 250px;
        height: 200px;
        /* background-color: pink; */
        margin-left: 70px;
        border-left: 1px solid #ccc;
      }
      .but-dz p {
        color: black;
        font-size: 24px;
        text-align: center;
        margin-top: 20px;
      }
      .but-dz p:nth-child(2) {
        font-size: 14px;
      }
      .but-dz a {
        display: block;
        width: 200px;
        height: 40px;
        background-color: black;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        border-radius: 30px;
        margin: 19px auto;
      }
      .but-dz img {
        display: block;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="nav">
        <ul class="nav-ul left">
          <li><a href="index.html">首页</a></li>
          <li><a href="">华为官网</a></li>
          <li><a href="">花粉俱乐部</a></li>
          <li><a href="">V码(优购码)</a></li>
          <li><a href="">企业购</a></li>
          <li><a href="">Select Region</a></li>
          <li style="background: url()"><a href="">更多精彩</a></li>
        </ul>
        <ul class="nav-ul right" style="float: right">
          <li>
            <a href="" class="mobile">请登录</a>&nbsp;<a href="" class="mobile1"
              >注册</a
            >
          </li>
          <li><a href="">我的订单</a></li>
          <li><a href="">客服</a></li>
          <li><a href="">网站导航</a></li>
          <li><a href="">手机版</a></li>
          <li style="background: url(); background-color: rgb(66, 66, 66)">
            <a href="./cart.html">购物车</a>
          </li>
        </ul>
      </div>
    </div>
    <div id="classification">
      <div class="classification-huawei">
        <div class="logo">
          <a href="">
            <img src="./imgs/logo.png" alt="" />
          </a>
        </div>
        <div class="classification-li">
          <ul>
            <li><a href="">华为专区</a></li>
            <li><a href="">鸿蒙智联</a></li>
            <li><a href="">莫塞尔</a></li>
            <li><a href="">华为智选</a></li>
            <li><a href="">Harmony OS</a></li>
            <li><a href="">教育优惠</a></li>
            <li><a href="">特惠企采</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div id="rotation">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./imgs/0678A9C1DF05B8D887A5B8601F3B45BF.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/25DDA302911422D0085E6DDC994D1674.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/5459DB5CEDA20ECD87686B7E262B0D73.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/670224867B99842DAFCAA6E83649B304.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/9E5E8C53EF6F70AF099D7063E1AFF35B.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/C976B45DEBAA8FC5114124EBDFF36895.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/9E9DF7BE3A1E902D3FDDDD944C0B33FE.jpg" alt="" />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
      </div>
    </div>
    <div id="list">
      <div class="list-li">
        <div class="list-fl">
          <img src="./imgs/znjj.webp" alt="" />
          <span>智能家具</span>
        </div>
      </div>
    </div>
    <div id="list-1">
      <a href=""></a>
      <a href=""></a>
      <a href=""></a>
      <a href=""></a>
    </div>
    <div id="list-2-ms">
      <div class="list-2-ms-text">
        <span>秒杀</span>
        <span>限时秒杀 ></span>
      </div>
      <br />
      <br />
      <br />
      <div class="list-2-ms-img">
        <div class="img1" style="background: rgb(239, 230, 234)">
          <img src="./imgs/ms1.png" alt="" /><br />
          <span class="spans">00:00场</span><br />
          <span class="span1">距离结束时间</span>
          <div class="date">
            <p class="p1">04</p>
            <p class="p2">33</p>
            <p class="p3">34</p>
          </div>
        </div>
      </div>
    </div>

    <div id="list-3-xsg">
      <div class="list-2-ms-text">
        <span>限时购</span>
        <span>限时购 ></span>
      </div>
      <br />
      <br />
      <br />
      <div class="list-2-ms-img list-3-xsg-img">
        <div class="img1">
          <img
            src="./imgs/ms1.png"
            alt=""
            style="width: 150px; height: 150px; margin-bottom: 10px"
          /><br />
          <span style="font-size: 14px">距离结束时间</span><br />
          <span style="font-size: 12px; color: #ccc">距离结束时间</span
          ><br /><br />
          <span style="color: red">￥距离</span><del>￥距离</del>
        </div>
      </div>
    </div>
    <div id="rotTou">
      <div class="swiper Touswiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./imgs/Touswiper1 .webp" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/Touswiper2.webp" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/Touswiper3.webp" alt="" />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
      </div>
    </div>
    <div id="tab">
      <div class="tabTxet">
        <ul class="tab-ul">
          <li style="color: black; font-size: 24px">手机</li>
          <li>智慧屏</li>
          <li>笔记本</li>
          <li>精品平板</li>
          <li>台式机</li>
          <li>显示器</li>
          <li>电脑配件</li>
        </ul>
        <ul class="tab-ul-gd">
          <li>更多></li>
        </ul>
      </div>
      <br />
      <div class="tabImg">
        <div class="tabImg0 tabImgx">
          <div class="tab-shouji-1">
            <img src="./imgs/tab-shouji1.png" alt="" />
            <p><span class="span-xin">新品上市</span>HUAWEI P50E</p>
            <p class="tab-text">原色影像</p>
            <p class="tab-moy">￥4488</p>
            <p><span class="span-jifen">赠送积分</span></p>
          </div>
        </div>
        <div class="tabImg1 tabImgx"></div>
        <div class="tabImg2 tabImgx"></div>
        <div class="tabImg3 tabImgx"></div>
        <div class="tabImg4 tabImgx"></div>
        <div class="tabImg5 tabImgx"></div>
        <div class="tabImg6 tabImgx"></div>
      </div>
    </div>

    <!-- 尾部 -->
    <div id="buttom">
      <div class="but-list">
        <div class="but-list-l">
          <img src="./imgs/but1 (1).png" alt="" />
          百强企业 品质保证
        </div>
        <div class="but-list-l">
          <img src="./imgs/but2.png" alt="" />
          七天退货 15天换货
        </div>
        <div class="but-list-l">
          <img src="./imgs/but4.png" alt="" />
          48元起免运费
        </div>
        <div class="but-list-l">
          <img src="./imgs/but3.png" alt="" />
          2000家服装店 全国联保
        </div>
      </div>
      <div class="but-nav">
        <div class="but-nav-box">
          <ul class="but-nav-ul">
            <li class="but-nav-ulLi">购物指南</li>
            <li>免息分期</li>
            <li>以旧换新</li>
            <li>众测活动</li>
            <li>企业购</li>
            <li>O2O采购</li>
          </ul>
          <ul class="but-nav-ul ul-left">
            <li class="but-nav-ulLi">售后服务</li>
            <li>免息分期</li>
            <li>以旧换新</li>
            <li>众测活动</li>
            <li>企业购</li>
            <li>O2O采购</li>
          </ul>
          <ul class="but-nav-ul ul-left">
            <li class="but-nav-ulLi">维修与技术支持</li>
            <li>免息分期</li>
            <li>以旧换新</li>
            <li>众测活动</li>
            <li>企业购</li>
            <li>O2O采购</li>
          </ul>
          <ul class="but-nav-ul ul-left">
            <li class="but-nav-ulLi">特色服务</li>
            <li>免息分期</li>
            <li>以旧换新</li>
            <li>众测活动</li>
            <li>企业购</li>
            <li>O2O采购</li>
          </ul>
          <ul class="but-nav-ul ul-left">
            <li class="but-nav-ulLi">关于我们</li>
            <li>免息分期</li>
            <li>以旧换新</li>
            <li>众测活动</li>
            <li>企业购</li>
            <li>O2O采购</li>
          </ul>
          <ul class="but-nav-ul ul-left">
            <li class="but-nav-ulLi">友情链接</li>
            <li>免息分期</li>
            <li>以旧换新</li>
            <li>众测活动</li>
            <li>企业购</li>
            <li>O2O采购</li>
          </ul>
          <div class="but-dz left">
            <p>950805</p>
            <p>7 x 24 小时客服热线(仅收市话费)</p>
            <a href="">在线客服</a>
            <img src="./imgs/buts.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  var mySwiper = new Swiper(".swiper", {
    direction: "horizontal", // 垂直切换选项
    loop: true, // 循环模式选项
    autoplay: true, //等同于以下设置,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
      pauseOnMouseEnter: true,
    },

    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },

    // 如果需要滚动条
    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });
</script>
<script>
  let list = document.querySelector(".list-li");
  let listS = document.querySelector("#list-1");
  let msList = document.querySelector(".list-2-ms-img");
  let xsgList = document.querySelector(".list-3-xsg-img");
  let tabImg0 = document.querySelector(".tabImg0");
  let tabImg1 = document.querySelector(".tabImg1");
  let tabImg2 = document.querySelector(".tabImg2");
  let tabImg3 = document.querySelector(".tabImg3");
  let tabImg4 = document.querySelector(".tabImg4");
  let tabImg5 = document.querySelector(".tabImg5");
  let tabImg6 = document.querySelector(".tabImg6");
  //跳转
  function listSrc(a) {
    console.log(a.getAttribute("value"));
    if (
      a.getAttribute("value") != 2 &&
      a.getAttribute("value") != 4 &&
      a.getAttribute("value") != 10 &&
      a.getAttribute("value") != 11 &&
      a.getAttribute("value") != 12
    ) {
      alert(`目前的ID值为${a.getAttribute("value")} 

现可跳转的ID接口为2、4、10、11、12`);
      return;
    }
    location.href = `list.html?id=${a.getAttribute("value")}`;
  }
  //用户名
  let mobile = document.querySelector(".mobile");
  let mobile1 = document.querySelector(".mobile1");
  if (localStorage.getItem("huaweiName")) {
    mobile.innerHTML = localStorage.getItem("huaweiName");
    mobile1.innerHTML = "退出账号";
  }
  mobile.onclick = function () {
    console.log(mobile1.innerHTML);
    if (mobile.innerHTML == "请登录") {
      location.href = "login.html";
      return false;
    } else {
      alert("账号名称");
      return false;
    }
  };
  mobile1.onclick = function () {
    console.log(mobile1.innerHTML);
    if (mobile1.innerHTML == "退出账号") {
      localStorage.removeItem("huaweiName");
      localStorage.removeItem("huaweiID")
      location.href = "index.html";
      return false;
    } else {
      location.href = "register.html";
      return false;
    }
  };
  let xhr = new XMLHttpRequest();
  xhr.open("get", "index.json");
  xhr.send("");
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      let text = JSON.parse(xhr.responseText);
      console.log(text);
      list.innerHTML = "";
      listS.innerHTML = "";
      xsgList.innerHTML = "";
      tabImg0.innerHTML = "";
      for (let i = 0; i < text.list.length; i++) {
        // divDOm.innerHTML += `<p value=${text.data[i].id}>${text.data[i].title}</p>`;
        list.innerHTML += `<div value=${text.list[i].id} class="list-fl" onclick="listSrc(this)" ><img src="${text.list[i].img}" alt=""><span>${text.list[i].name}</span></div>`;
      }
      for (let i = 0; i < text.data.length; i++) {
        // divDOm.innerHTML += `<p value=${text.data[i].id}>${text.data[i].title}</p>`;
        listS.innerHTML += `<a onclick="listSrc(this)"  value=${text.data[i].id} style="background: url(${text.data[i].img}) no-repeat; background-size: 100%;"></a>`;
      }

      for (let i = 0; i < text.ms.length; i++) {
        // divDOm.innerHTML += `<p value=${text.data[i].id}>${text.data[i].title}</p>`;
        msList.innerHTML += `
        <div onclick="listSrc(this)"  class="img1" value=${text.ms[i].id}>
          <img src=" ${text.ms[i].img}"
            alt=""
            style="width: 150px; height: 150px; margin-bottom: 10px"
          /><br />
          <span style="font-size: 14px">${text.ms[i].name}</span><br />
          <span style="font-size: 12px; color: #ccc"
            >${text.ms[i].text}</span
          ><br /><br />
          <span style="color: red">￥${text.ms[i].moy}</span><del>￥${text.ms[i].original}</del>
        </div>
        `;
      }
      for (let i = 0; i < text.xsg.length; i++) {
        // divDOm.innerHTML += `<p value=${text.data[i].id}>${text.data[i].title}</p>`;
        xsgList.innerHTML += `
        <div class="img1" onclick="listSrc(this)"  value=${text.xsg[i].id}>
          <img src=" ${text.xsg[i].img}"
            alt=""
            style="width: 150px; height: 150px; margin-bottom: 10px"
          /><br />
          <span style="font-size: 14px">${text.xsg[i].name}</span><br />
          <span style="font-size: 12px; color: #ccc"
            >${text.xsg[i].text}</span
          ><br /><br />
          <span style="color: red">￥${text.xsg[i].moy}</span><del>${text.xsg[i].original}</del>
        </div>
        `;
      }
      //1
      for (let i = 0; i < text.shouji.length; i++) {
        // divDOm.innerHTML += `<p value=${text.data[i].id}>${text.data[i].title}</p>`;
        tabImg0.innerHTML += `
        <div class="tab-shouji-1" onclick="listSrc(this)"  value=${text.shouji[i].id}>
                <img src="${text.shouji[i].img}" alt="">
                <p> <span class="span-xin">${text.shouji[i].xin}</span>${text.shouji[i].name}</p>
                <p class="tab-text">${text.shouji[i].text}</p>
                <p class="tab-moy">￥${text.shouji[i].moy}</p>
                <p> <span class="span-jifen">${text.shouji[i].jifen}</span></p>
            </div>
        `;
      }

      //2
      for (let i = 0; i < text.shouji.length; i++) {
        // divDOm.innerHTML += `<p value=${text.data[i].id}>${text.data[i].title}</p>`;
        tabImg1.innerHTML += `
        <div class="tab-shouji-1" onclick="listSrc(this)"  value=${text.zhp[i].id}>
                <img src="${text.zhp[i].img}" alt="">
                <p> <span class="span-xin">${text.zhp[i].xin}</span>${text.zhp[i].name}</p>
                <p class="tab-text">${text.zhp[i].text}</p>
                <p class="tab-moy">￥${text.zhp[i].moy}</p>

            </div>
        `;
      }
      //1
      for (let i = 0; i < text.shouji.length; i++) {
        // divDOm.innerHTML += `<p value=${text.data[i].id}>${text.data[i].title}</p>`;
        tabImg2.innerHTML += `
        <div class="tab-shouji-1" onclick="listSrc(this)"  value=${text.shouji[i].id}>
                <img src="${text.shouji[i].img}" alt="">
                <p> <span class="span-xin">${text.shouji[i].xin}</span>${text.shouji[i].name}</p>
                <p class="tab-text">${text.shouji[i].text}</p>
                <p class="tab-moy">￥${text.shouji[i].moy}</p>
                <p> <span class="span-jifen">${text.shouji[i].jifen}</span></p>
            </div>
        `;
      }

      //3
      for (let i = 0; i < text.shouji.length; i++) {
        // divDOm.innerHTML += `<p value=${text.data[i].id}>${text.data[i].title}</p>`;
        tabImg3.innerHTML += `
        <div class="tab-shouji-1" onclick="listSrc(this)"  value=${text.zhp[i].id}>
                <img src="${text.zhp[i].img}" alt="">
                <p> <span class="span-xin">${text.zhp[i].xin}</span>${text.zhp[i].name}</p>
                <p class="tab-text">${text.zhp[i].text}</p>
                <p class="tab-moy">￥${text.zhp[i].moy}</p>

            </div>
        `;
      }
      //4
      for (let i = 0; i < text.shouji.length; i++) {
        // divDOm.innerHTML += `<p value=${text.data[i].id}>${text.data[i].title}</p>`;
        tabImg4.innerHTML += `
        <div class="tab-shouji-1" onclick="listSrc(this)"  value=${text.shouji[i].id}>
                <img src="${text.shouji[i].img}" alt="">
                <p> <span class="span-xin">${text.shouji[i].xin}</span>${text.shouji[i].name}</p>
                <p class="tab-text">${text.shouji[i].text}</p>
                <p class="tab-moy">￥${text.shouji[i].moy}</p>
                <p> <span class="span-jifen">${text.shouji[i].jifen}</span></p>
            </div>
        `;
      }

      //5
      for (let i = 0; i < text.shouji.length; i++) {
        // divDOm.innerHTML += `<p value=${text.data[i].id}>${text.data[i].title}</p>`;
        tabImg5.innerHTML += `
        <div class="tab-shouji-1" onclick="listSrc(this)"  value=${text.zhp[i].id}>
                <img src="${text.zhp[i].img}" alt="">
                <p> <span class="span-xin">${text.zhp[i].xin}</span>${text.zhp[i].name}</p>
                <p class="tab-text">${text.zhp[i].text}</p>
                <p class="tab-moy">￥${text.zhp[i].moy}</p>

            </div>
        `;
      }
      //6
      for (let i = 0; i < text.shouji.length; i++) {
        // divDOm.innerHTML += `<p value=${text.data[i].id}>${text.data[i].title}</p>`;
        tabImg6.innerHTML += `
        <div class="tab-shouji-1" onclick="listSrc(this)"  value=${text.shouji[i].id}>
                <img src="${text.shouji[i].img}" alt="">
                <p> <span class="span-xin">${text.shouji[i].xin}</span>${text.shouji[i].name}</p>
                <p class="tab-text">${text.shouji[i].text}</p>
                <p class="tab-moy">￥${text.shouji[i].moy}</p>
                <p> <span class="span-jifen">${text.shouji[i].jifen}</span></p>
            </div>
        `;
      }
    }
  };
  function fn() {
    let p1 = document.querySelector(".p1");
    let p2 = document.querySelector(".p2");
    let p3 = document.querySelector(".p3");
    var time2 = "2040-05-17";
    time1 = new Date();
    time2 = Date.parse(time2);
    var diffSeconds = Math.abs(time1 - time2) / 1000;
    var day = Math.floor(diffSeconds / (3600 * 24));
    var hours = Math.floor((diffSeconds - day * 24 * 3600) / 3600);
    var m = Math.floor((diffSeconds - day * 24 * 3600 - hours * 3600) / 60);
    var s = (diffSeconds - day * 24 * 3600 - hours * 3600) % 60;
    p1.innerHTML = hours < 10 ? "0" + hours : hours;
    p2.innerHTML = m < 10 ? "0" + m : m;
    p3.innerHTML = parseInt(s) < 10 ? "0" + parseInt(s) : parseInt(s);
  }
  fn();
  setInterval(fn, 1000);

  let tabLI = document.querySelectorAll(".tab-ul>li");
  let tabImgx = document.querySelectorAll(".tabImgx");
  for (let i = 0; i < tabLI.length; i++) {
    tabLI[i].onclick = function () {
      for (let j = 0; j < tabLI.length; j++) {
        tabLI[j].style.fontSize = "20px";
        tabLI[j].style.color = "";
        tabLI[j].setAttribute("class", "class1");
        tabImgx[j].style.display = "none";
      }
      this.style.fontSize = "24px";
      this.setAttribute("class", "class2");
      tabImgx[i].style.display = "block";
    };
  }
</script>
